<template>
  <el-cascader
    v-if="isInit"
    clearable
    style="width: 400px"
    v-model="classifyId"
    :options="classifyNameOptions"
    :props="{ expandTrigger: 'hover' }"
    @change="confirmClassityId"></el-cascader>
</template>

<script>
export default {
  name: 'ShopClassifyBox',
  props: {
    setCallBack: Function,
    initClassifyId: Number
  },
  data: function () {
    return {
      isInit:false,
      classifyId: [],
      shopProductAllClassifyArr: [],
      classifyNameOptions: [],
      defaultClassifyName: [],
    }
  },
  mounted () {
    let $this=this
    if ($this.$props.initClassifyId && $this.$props.initClassifyId>0){
      $this.isInit=false
    }else{
      $this.isInit=true
    }
    this.getShopClassify(function () {
      $this.classifyId=$this.getClassifyPathById($this.$props.initClassifyId)
      // console.log('$this.classifyId',$this.classifyId)
      // console.log('$this.$props.initClassifyId',$this.$props.initClassifyId)
      $this.isInit=true
      $this.$forceUpdate()
    })
  },
  methods: {
    // 设置完毕分类ID回调
    confirmClassityId: function (value) {
      // console.log('设置完毕分类ID回调',value)
      if (value.length && value.length===3){
        var classifyId=value[2].split('-')[3]
        this.$props.setCallBack(classifyId)
        var path=this.getClassifyPathById(classifyId)
      }else{
        this.$props.setCallBack(0)
      }
    },
    // 获取店铺所有分类
    getShopClassify (callback) {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Product/getAllProductClassify', {}, function (data) {
        $this.shopProductAllClassifyArr = data
        $this.initClassifyNameOptions()
        $this.$forceUpdate()
        if (typeof callback==='function'){
          callback()
        }
      }, function (response) {
        $this.$message.success(response.message)
        $this.currLoading = false
        $this.$forceUpdate()
      })
    },
    // 根据第三层数组,获取分类名称
    getClassifyPathById: function (classifyId) {
      // console.log('classifyId',classifyId)
      var path = []
      if (!classifyId){
        return path
      }
      this.shopProductAllClassifyArr.forEach(function (item, index) {
        item.subList.forEach(function (_item, _index) {
          _item.subList.forEach(function (__item, __index) {
              var pathArr=__item.path.split('-')
              if (pathArr[3]==classifyId){
                path = [item.path,_item.path,__item.path]
              }
          })
        })
      })
      return path
    },
    // 根据名称设置path数组
    getClassifyAllPathByName: function (name) {
      var path
      this.shopProductAllClassifyArr.forEach(function (item, index) {
        item.subList.forEach(function (_item, _index) {
          _item.subList.forEach(function (__item, __index) {
            if (__item.name === name) {
              path = __item.path
            }
          })
        })
      })
      var pathArr = path.split('-')
      return [pathArr[0] + '-' + pathArr[1], pathArr[0] + '-' + pathArr[1] + '-' + pathArr[2], pathArr[0] + '-' + pathArr[1] + '-' + pathArr[2] + '-' + pathArr[3]]
    },
    initClassifyNameOptions: function () {
      var arr = []
      var defaultArr0, defaultArr1, defaultArr2
      this.shopProductAllClassifyArr.forEach(function (item, index) {
        var _arr = []
        if (!defaultArr0) {
          defaultArr0 = item.path
        }
        item.subList.forEach(function (_item, _index) {
          if (!defaultArr1) {
            defaultArr1 = _item.path
          }
          var __arr = []
          _item.subList.forEach(function (__item, __index) {
            if (!defaultArr2) {
              defaultArr2 = __item.path
            }
            __arr.push({
              label: __item.name,
              value: __item.path,
            })
          })
          _arr.push({
            label: _item.name,
            value: _item.path,
            children: __arr
          })
        })
        arr.push({
          label: item.name,
          value: item.path,
          children: _arr
        })
      })
      // console.log('this.classifyNameOptions',arr)
      this.classifyNameOptions = arr
      this.defaultClassifyName = [defaultArr0, defaultArr1, defaultArr2]
    },
  }
}
</script>

<style scoped>

</style>
